<template>
    <div id="app">
        <h1>{{title }}</h1>
        <ul>
            <input type="text" v-model="thing">
            <button v-on:click="add">添加</button>
            <li v-for="(todo,index) in todos" :id="index" :class="{done:todo.done}">
                <label>{{index + 1}}.{{ todo.value }}</label>
                <time>{{todo.created|date}}</time>
            </li>
        </ul>
        <todo :total="todos.length" :done="done" />
    </div>
</template>

<script>


    import todo from './Tod.vue'
    export default {
        name: 'app',
        components:[todo],
        methods: {
            add: function () {
                this.todos.push({value:this.thing, done: false,created:Date.now()})
            }
        },
        data () {
            return {
                thing:null,
                title:'vue-todos',
                todos:[{value:"阅读一本关于前端开发的书",done:false,created:Date.now()},
                    {value:"补充范例代码",done:true,created:Date.now()},
                    {value:"写心得",done:false,created:Date.now()}],
                title:'vue-todos'
            }
        },
        filters:{
            date(val){
                return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds()
            }
        },
        computed:{
            done:function(){
                var count=0;
                for(var i=0;i<this.todos.length;i++){
                    if(!this.todos[i].done){
                        count++;
                    }
                }
                return count;
            }
        }
    }
</script>

<style>
    .done{text-decoration: line-through}
</style>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
